<script setup>
import {useRouter} from "vue-router";
import { onMounted, ref, getCurrentInstance } from "vue";
import formDef1 from './form-def-1.js';
import formDef2 from './form-def-2.js';

import { api } from '@jzl/api'
import { to, removeToken } from '@jzl/utils'

const instance = getCurrentInstance();


const dataFormValue = ref({
  form_name: 'Name Test',
  cols: 3
});

const isH5 = ref(false);
const dataFormDef = ref({});
dataFormDef.value = formDef1;

const handleChangeDef = () => {
  dataFormDef.value = formDef2;
}

const handleChangeH5 = () => {
  isH5.value = !isH5.value;
}

const handleSaveSimpleForm = (val) => {
  console.log(`-------- handleSaveSimpleForm: `, val)
}


onMounted(async() => {

});
</script>

<template>
  <main>
    <LinkQuery></LinkQuery>
    <h5>JzlForm 新组件
      <el-button @click="handleChangeDef" v-tippy="{ content: 'good' }">切换</el-button>
      <el-button @click="handleChangeH5" v-tippy="{ content: 'good' }">H5切换</el-button>
    </h5>
    <div>value: {{ dataFormValue }}</div>
    <jzl-form
      v-model="dataFormValue"
      :is-simple="true"
      :form-def="dataFormDef"
      :is-h5="isH5"
      :is-view="false"
      @save="handleSaveSimpleForm"
    ></jzl-form>
  </main>
</template>
